<template>
  <view>
    <view class="mainBox">
      <view class="MainItem">
        <view class="text1"> 证件类型 </view>
        <view class="text2">
          身份证
          <image src="/static/hotspot/xuanze@2x.png" mode="aspectFit"></image>
        </view>
      </view>
      <view class="lineBox"></view>
      <view class="MainItem">
        <view class="text1"> 证件号码 </view>
        <view class="text2">
          <input
            v-model="formData.participantsIdCard"
            type="number"
            placeholder="请输入证件号码"
            placeholder-style="font-weight: 400; font-size: 24rpx; color: #303030;"
          />
        </view>
      </view>
      <view class="lineBox"></view>
      <view class="MainItem">
        <view class="text1"> 姓名 </view>
        <view class="text2">
          <input
            v-model="formData.participantsName"
            type="text"
            placeholder="请输入姓名"
            placeholder-style="font-weight: 400; font-size: 24rpx;  color: #303030;"
          />
        </view>
      </view>
      <view class="lineBox"></view>
      <view class="MainItem">
        <view class="text1"> 手机号码 </view>
        <view class="text2">
          <input
            v-model="formData.participantsMobile"
            type="number"
            placeholder="请输入手机号码"
            placeholder-style="font-weight: 400; font-size: 24rpx; color: #303030;"
          />
        </view>
      </view>
    </view>
    <view class="tipsBox">
      <view> *请确保姓名与证件一致</view>
      您已知晓您的身份证等信息将用于购买须实名制的产品，请确保信息真实有效。
    </view>
    <view class="saveBOx">
      <image
        v-if="switchSaveImg"
        src="/static/hotspot/baocun@2x.png"
        mode="aspectFit"
        @click="switchSave"
      >
      </image>
      <image
        v-else
        src="/static/hotspot/yibaocun@2x.png"
        mode="aspectFit"
        @click="switchSave"
      >
      </image>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      switchSaveImg: true,
      formData: {},
      formType: null,
    };
  },

  onLoad(option) {
    this.formType = option.type;
    if (option.type === "edit") {
      this.formData = JSON.parse(option.data);
    }
  },
  methods: {
    switchSave() {
      let that = this;
      let data = {
        ...this.formData,
        ...{
          userId: uni.getStorageSync("userId"),
        },
      };
      if (this.formType == "add") {
        uni.app.post("/activity/personnel/add", data, "json", "", (res) => {
          that.fn();
        });
      } else {
        uni.app.post("/activity/personnel/update", data, "json", "", (res) => {
          that.fn();
        });
      }
    },
    fn() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          window.AndroidBridge.backEvent();
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

.mainBox {
  margin: 32rpx 28rpx;
  padding: 24rpx 32rpx;
  background: #ffffff;
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .lineBox {
    width: 100%;
    height: 0rpx;
    border: 2rpx solid #f8f8f8;
    margin: 25rpx 0 25rpx;
  }

  .MainItem {
    display: flex;
    align-items: center;

    .text1 {
      width: 96rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #303030;
      margin-right: 16rpx;
    }

    .text2 {
      flex: 1;
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      display: flex;
      align-items: center;

      image {
        width: 48rpx;
        height: 48rpx;
      }

      input {
        width: 100%;
      }
    }
  }
}

.tipsBox {
  margin: 64rpx 28rpx 0;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
  line-height: 32rpx;
}

.saveBOx {
  width: 100%;
  background: #ffffff;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 16rpx 28rpx;
  position: fixed;
  /* 固定定位 */
  bottom: 0;
  /* 距离底部0 */
  left: 0;
  /* 距离左边0 */

  image {
    width: 694rpx;
    height: 56rpx;
    border-radius: 56rpx 56rpx 56rpx 56rpx;
  }
}
</style>
